import React, { PropTypes }  from 'react';
import ReactDOM from 'react-dom';
import { Router, Link } from 'react-router';
import {bind_change} from '../common/State';
import { Button, Row, Form, Input,message } from 'antd'
import styles from './login.scss';
import api from '../api';
const FormItem = Form.Item
import $ from 'jquery';
 class Login extends React.Component {
    constructor(props,context) {
        super(props,context);
        this.state = {
            sendText:'发送验证码',
            sending:false
        };
    }
    componentWillMount(){
    }
    
    handleOk(){
        const {validateFieldsAndScroll } = this.props.form;
        validateFieldsAndScroll((errors, values) => {
          if (errors) {
            return
          }
          this.login(values)

        })
    }
    async login(values){
       var result =  await api('/authority/login',{...values})
       if(result.cd!=0){
        message.destroy();
        message.error(result.msg);
        return
       }

       var path = '/home' ,
          next = this.props.location.query.next;
       
       if(next){
          path = next;
       }
       
       location.href=path;

    }

    sendValidate(){
      const {validateFields} = this.props.form;
        
        validateFields(['name','passwd'],(errors,values) => {
            if (errors) return;
            this.sendCode(values);
        })

    }

    async sendCode(values){
      var {name,passwd} = values;
      var result = await api('/authority/send-code',{name});
      if(result.cd!=0){
        message.error(result.msg);
        return
      }
      if(result.code){
        this.props.form.setFieldsValue({code:result.code});
      }
      

      var i = 60;
      this.setState({sendText:i+'秒',sending:true})
      var timer = setInterval(()=>{
          i--;
          this.setState({sendText:i+'秒'})
          if (i==0) {
              clearInterval(timer);
              this.setState({sendText:'发送验证码',sending:false})
          };
      },1000)
    }


    render() {
        const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
        var {imageCode,sendText,sending} = this.state;
        return (
            <div className={styles.form}>
              <div className={styles.logo} style={{height:'auto',lineHeight:'40px',marginBottom:'20px'}}>
                {/*<img alt={'logo'} style={{width:'140px'}} src={'/static/main/images/logo.png'} />*/}
                <span style={{fontWeight:'bold',fontSize:'18px'}}>医诺筹款后台管理系统</span>
              </div>
              <form>
                 <FormItem hasFeedback>
                      {getFieldDecorator('name', {
                        rules: [
                          {
                            required: true,
                            message: '请填写正确的用户名',
                            pattern:/^1\d{10}$/
                          },
                        ],
                      })(<Input size="large" onPressEnter={this.handleOk.bind(this)} placeholder="用户名" />)}
                    </FormItem>
                    <FormItem hasFeedback>
                      {getFieldDecorator('passwd', {
                        rules: [
                          {
                            required: true,
                            message: '请填写密码',
                          },
                        ],
                      })(<Input size="large" type="password" onPressEnter={this.handleOk.bind(this)} placeholder="密码" />)}
                    </FormItem>
                    <div className={styles.sendCodeBox}>
                      <FormItem hasFeedback >
                        {getFieldDecorator('code', {
                          rules: [
                            {
                              required: true,
                              message: '请填写验证码',
                            },
                          ],
                        })(<Input size="large" type="text" onPressEnter={this.handleOk.bind(this)} placeholder="验证码" />)}
                      </FormItem>
                      <Button type="primary" disabled={sending} className={styles.codeBtn} size="large" onClick={this.sendValidate.bind(this)} >
                          {sendText}
                      </Button>
                    </div>
                <Row>
                  <Button type="primary" size="large" onClick={this.handleOk.bind(this)} >
                    登录
                  </Button>
                </Row>
              </form>
            </div>
        );
    }
}

Login.contextTypes= { router: React.PropTypes.object.isRequired};

export default  Form.create()(Login);

